@import "../../common/less/theme";
.category{
	.c-main {
		width: 100%;
		display: flex;
		.m-left {
			flex: 2;
			scroll-view{
				height: 100%;
				width: 100%;
				.l-item{
					display: flex;
					align-items: center;
					height: 103rpx;
					text {
						position: relative;
						display: inline-block;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						flex:1;
						color:#666;
					}
					&-active{
						background: #fff;
						text {
							color:#ab2b2b;
							&::before{
								position: absolute;
								content: '';
								top: 0;
								left: 0;
								height: 100%;
								width: 0;
								border-left: 5rpx solid #ab2b2b;
							}
						}
					}
				}
			}
		}
		.m-right{
			flex: 8;
			scroll-view{
				height: 100%;
				width: 100%;
				.sub-list-wrap{
					padding: 26rpx;
					.wrap-banner{
						height: 200rpx;
						width:100%;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.wrap-type{
						display: flex;
						align-items: center;
						justify-content: center;
						height: 80rpx;
						text{
							position: relative;
							display: inline-block;
							padding:0 10rpx;
							color:#666;
							&::before{
								position: absolute;
								content: '';
								top:50%;
								left:-30rpx;
								transform: translateY(-50%);
								width:30rpx;
								height: 1rpx;
								background: #666;
							}
							&::after{
								position: absolute;
								content: '';
								top:50%;
								right:-30rpx;
								transform: translateY(-50%);
								width:30rpx;
								height: 1rpx;
								background: #666;
							}
						}
					}
					.wrap-list{
						display: flex;
						flex-wrap: wrap;
						.list-item{
							flex-basis: 153rpx;
							.item-pic{
								width:153rpx;
								height: 153rpx;
								image{
									width:100%;
									height: 100%;
								}
							}
							.item-name{
								display: flex;
								margin-top:10rpx;
								justify-content: center;
								text{
									text-align:center;
									color:#333;
								}
							}
							&:not(:nth-child(3n)){
								margin:0 30rpx 27rpx 0;
							}
						}
					}
				}
			}
		}
	}
}